<!-- 弹窗组件 -->
<template>
  <div class="my-dialog">
    <el-dialog v-model="dialogShow" :title="dialogForm.title" :draggable="dialogForm.isDrag" :before-close="onBeforeClose" :width="dialogForm.width" :close-on-click-modal="false">
      <div class="my-dialog__box">
        <slot name="dialogBox"></slot>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onBeforeClose" :loading="dialogloading">取 消</el-button>
          <el-button type="primary" @click="onConfirm" :loading="dialogloading">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts'>
import {ref,watch} from 'vue'

const dialogShow = ref<boolean>(false)
const dialogloading = ref<boolean>(false)

interface PropsDialog {
  dialogVisible: boolean;//弹窗是否出现
  dialogForm: {
    title: string;//弹窗标题
    width?:string;//弹窗宽度
    isDrag?:boolean;
  }
}
const props = withDefaults(defineProps<PropsDialog>(), {
  dialogVisible: false,
  dialogForm: () => ({
    title: '弹窗',
    isDrag:false
  })
});

const emit = defineEmits(['dialogClose', 'dialogConfirm'])
//监控弹窗是否出现
watch(
  () => props.dialogVisible,
  () => {
    dialogShow.value = !dialogShow.value
  },
  // {immediate:true}
)
//关闭
const onBeforeClose = () => {
  emit('dialogClose')
}
//确定
const onConfirm = () => {
  emit('dialogConfirm')
}
</script>
<style scoped lang='scss'>
.my-dialog {
  &__box {
    // max-height: 60vh;
    // overflow-x: initial;
    // overflow-y: auto;
  }
}
</style>
<style lang='scss'>
.el-dialog {
  border-radius: 6px !important;

  .el-dialog__header {
    border-radius: 6px 6px 0 0 !important;
    margin-right: 0;
    padding: 24px 24px 0 24px;
    line-height: 44px;

    .el-dialog__title {
      font-size: var(--next-font-size20);
      font-weight: 500;
    }
    .el-dialog__headerbtn .el-dialog__close{
      font-size: 25px;
    }
  }

  .el-dialog__body {
    padding: 24px 20px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8eaec !important;
    padding: 15px 20px;
  }

  .el-dialog__headerbtn {
    top: 0;
    right: 0;
    height: 54px;
    line-height: 54px;

    .el-dialog__close {
      color: #999;
      margin-top: 20px;
    }
  }
}
</style>
